一頁式網站2

2024 iThome 鐵人賽

DAY 13

自我挑戰組

asp.net可以變出那些功能系列第 13 篇

16th鐵人賽

Tzu

2024-09-20 03:16:35

359 瀏覽

分享至

其實我覺得工程師要靠配色去創造不同的風格，還有美學真的是有難度
而且像是一頁式網站的風格的內容範例，
要工程師去想真的是要有想像力啊~

ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View

這裡都只有Controllers裡面的Entities>產生畫面View

或許後面不夠寫會再回頭創造出資料表的連結也是有可能的，可以期待~

一頁式網站
https://laihao2.com/Home/Contact6

只有Controllers裡面的Entities>產生畫面View

Controllers裡面的Entities

public ActionResult Contact6()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }

解釋程式碼
這段程式碼是使用 ASP.NET MVC 框架來處理 Web 應用程式中的「聯絡」頁面。以下是各部分的解釋：

public ActionResult Contact6():
- 這是一個名為 Contact6 的控制器方法（也稱為動作方法）。它的返回類型是 ActionResult，表示它會返回一個行為結果給前端（例如一個視圖、重定向或錯誤訊息）。
ViewBag.Message = "Your contact page.";:
- 這行程式碼使用了 ViewBag，這是一個 ASP.NET MVC 中的動態物件，允許在控制器和視圖之間傳遞數據。在這裡，它設置了一個名為 Message 的屬性，並賦值為 "Your contact page."。這個數據會傳遞到相應的視圖（HTML 頁面）中，並顯示出這個訊息。
return View();:
- 這行程式碼返回了與控制器方法名稱相對應的視圖。它會去尋找名稱為 Contact6 的視圖檔案（如 Contact6.cshtml）來呈現給使用者。如果沒有指定視圖名稱，它會默認使用與方法名稱相同的視圖。

總結：這個方法負責處理「聯絡」頁面的請求，將訊息傳遞到對應的視圖中並顯示給使用者。

產生畫面View程式碼

@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@{
    ViewBag.Title = "Contact6";
}

<div class="farm-wrapper">

    <h3>作品-一頁式網站</h3>
    <h3>建置中</h3>

    <div class="farm-content">
        <head>
            <meta charset="UTF-8">
            <link rel="stylesheet" href="css/reset.css">
            <link rel="preconnect" href="https://fonts.gstatic.com">
            <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Shippori+Mincho&display=swap">

            <link rel="stylesheet" href="css/style.css">
            <link rel="stylesheet" href="@Url.Content("~/Content/css/reset.css")">
            @section styles {
                <link rel="stylesheet" href="@Url.Content("~/Content/css/farm-style.css")">
            }
            <title>Wedding Party Invitation</title>
            <style>
                img {
                    border-radius: 50%;
                }

                body {
                    background-color: pink;
                }

                dl {
                    margin-left: 20px;
                }

                dd {
                    margin-left: 20px;
                }
            </style>
        </head>
        <body>
            <header>
                <div class="innerWrap">
                    <h1>
                        <img src="~/templates/eyecatch.png" alt="Welcome to Our Party">
                    </h1>
                    <nav>
                        <ul class="ffJosefin">
                            <li><a href="#msgArea">Message</a></li>
                            <li><a href="#dateArea">Date</a></li>
                            <li><a href="#formArea">Form</a></li>
                        </ul>
                    </nav>
                    @*<p class="scroll ffJosefin">Scroll<br><img src="~/templates/bar.png" alt=""></p>*@
                </div>
            </header>
            <main>
                <section class="msgSec" id="msgArea">
                    <div class="innerWrap">
                        <h2 class="ffJosefin">Message</h2>
                        <p>
                            親愛的朋友們<br>
                            我很高興邀請你一起享用一頓美味的晚餐。<br>
                        </p>
                        <p>
                            誠摯邀請您在百忙當中撥空參與，讓我們一起敘舊，享受美食，度過一個美好的夜晚！<br>
                            請填寫以下表單，告知是否出席。<br>
                        </p>
                        <p class="illust"><img src="~/templates/webphoto.jpg" alt="My Photo" style="width:200px; height:auto;" /></p>
                    </div>
                </section>
                <section class="dateSec" id="dateArea">
                    <div class="innerWrap">
                        <h2 class="ffJosefin">Save the Date</h2>
                        <div class="layoutWrap">
                            <p><img src="~/templates/date_img.jpg" alt=""></p>
                            <div>
                                <p class="dateDetailSec">
                                    3022.8.8 <span class="word1">Thu</span><br>
                                    <span class="word2">Start</span> <span class="word3">18:30-</span>
                                </p>
                                <section class="accessSec">
                                    <h3 class="ffJosefin">Access</h3>
                                    <p>
                                        永康街1-2-3號<br>

                                        06-123-456-7<br>
                                    </p>
                                </section>
                            </div>
                        </div>
                    </div>
                </section>
                <section class="formSec" id="formArea">
                    <div class="innerWrap">
                        <h2 class="ffJosefin">RSVP</h2>
                        <form action="" method="">
                            <p class="attendRadio">
                                <label><input type="radio" name="attend" value="參加" checked="checked">參加</label>
                                <label><input type="radio" name="attend" value="不參加">不參加</label>
                            </p>
                            <p>
                                姓名<input type="text" name="user_name">
                            </p>
                            <p>
                                電子郵件<input type="email" name="user_mail">
                            </p>
                            <p>
                                您的類型
                                <select name="user_type">
                                    <option value="草食動物">草食動物</option>
                                    <option value="肉食動物">肉食動物</option>
                                    <option value="人類">人類</option>
                                </select>
                            </p>
                            <p class="allergyCheck">
                                過敏食物<br>
                                <label><input type="checkbox" name="allergy" value="蛋">蛋</label>
                                <label><input type="checkbox" name="allergy" value="奶">奶</label>
                                <label><input type="checkbox" name="allergy" value="小麥">小麥</label>
                                <label><input type="checkbox" name="allergy" value="大豆">大豆</label>
                            </p>
                            <p>
                                留言
                                <textarea name="message"></textarea>
                            </p>
                            <p class="submitBtn">
                                <input type="submit" value="Send" class="ffJosefin">
                            </p>
                        </form>
                    </div>
                </section>
            </main>
            @*<footer class="ffJosefin">
                <p><small>© Capyzou ＆ Capyco</small></p>
            </footer>*@
        </body>
        </html>

解釋程式碼

這段程式碼是基於 ASP.NET MVC 的一個視圖，用於展示一個婚宴派對邀請的網頁，其中包含標題、訊息、日期、表單等。下面是對這段程式碼的詳細解釋：

1. 佈局與標題設定

@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@{
    ViewBag.Title = "Contact6";
}

Layout 指定了使用的主佈局檔案，這裡指定的是 ~/Views/Shared/_Layout.cshtml，用於定義頁面的整體外觀。
ViewBag.Title 設置了頁面的標題為 "Contact6"。

2. 主內容結構

<div class="farm-wrapper">
    <h3>作品-一頁式網站</h3>
    <h3>建置中</h3>

farm-wrapper 是主內容的容器，內部包含了兩個 <h3> 標題，顯示為 "作品-一頁式網站" 和 "建置中"。

3. 頁面 `<head>` 部分

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Shippori+Mincho&display=swap">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="@Url.Content("~/Content/css/reset.css")">
    @section styles {
        <link rel="stylesheet" href="@Url.Content("~/Content/css/farm-style.css")">
    }
    <title>Wedding Party Invitation</title>
    <style>
        img { border-radius: 50%; }
        body { background-color: pink; }
        dl { margin-left: 20px; }
        dd { margin-left: 20px; }
    </style>
</head>

<meta charset="UTF-8"> 設置了 UTF-8 編碼，這是處理多語言顯示的標準。
使用 <link> 引入了外部和本地的 CSS 檔案，如 reset.css 和 style.css，以及 Google 字體 Josefin Sans 和 Shippori Mincho。
@Url.Content() 是 ASP.NET MVC 用於生成內容檔案路徑的方法，確保檔案路徑在不同環境下都正確。
使用內聯的 <style> 樣式對圖片進行圓角處理，並設置了頁面的背景色為粉紅色。

4. 頁面 `<body>` 和內容部分

頁面標頭區域

<header>
    <div class="innerWrap">
        <h1><img src="~/templates/eyecatch.png" alt="Welcome to Our Party"></h1>
        <nav>
            <ul class="ffJosefin">
                <li><a href="#msgArea">Message</a></li>
                <li><a href="#dateArea">Date</a></li>
                <li><a href="#formArea">Form</a></li>
            </ul>
        </nav>
    </div>
</header>

header 中包含一個圖片作為標題，並提供導航欄，使用者可以快速跳轉到不同的部分（訊息、日期、表單）。

Message 區塊

<section class="msgSec" id="msgArea">
    <div class="innerWrap">
        <h2 class="ffJosefin">Message</h2>
        <p>親愛的朋友們<br>我很高興邀請你一起享用一頓美味的晚餐。</p>
        <p>誠摯邀請您在百忙當中撥空參與，讓我們一起敘舊，享受美食，度過一個美好的夜晚！</p>
        <p class="illust"><img src="~/templates/webphoto.jpg" alt="My Photo" style="width:200px; height:auto;" /></p>
    </div>
</section>

這個區塊顯示了一段婚宴邀請的訊息，包含簡短的邀請文字和圖片。

Save the Date 區塊

<section class="dateSec" id="dateArea">
    <div class="innerWrap">
        <h2 class="ffJosefin">Save the Date</h2>
        <div class="layoutWrap">
            <p><img src="~/templates/date_img.jpg" alt=""></p>
            <div>
                <p class="dateDetailSec">
                    3022.8.8 <span class="word1">Thu</span><br>
                    <span class="word2">Start</span> <span class="word3">18:30-</span>
                </p>
                <section class="accessSec">
                    <h3 class="ffJosefin">Access</h3>
                    <p>永康街1-2-3號<br>06-123-456-7</p>
                </section>
            </div>
        </div>
    </div>
</section>

dateSec 部分用來展示活動的日期和地點，包括活動開始時間以及地點資訊。

RSVP 表單區塊

<section class="formSec" id="formArea">
    <div class="innerWrap">
        <h2 class="ffJosefin">RSVP</h2>
        <form action="" method="">
            <p class="attendRadio">
                <label><input type="radio" name="attend" value="參加" checked="checked">參加</label>
                <label><input type="radio" name="attend" value="不參加">不參加</label>
            </p>
            <p>姓名<input type="text" name="user_name"></p>
            <p>電子郵件<input type="email" name="user_mail"></p>
            <p>您的類型<select name="user_type"><option value="草食動物">草食動物</option><option value="肉食動物">肉食動物</option><option value="人類">人類</option></select></p>
            <p class="allergyCheck">過敏食物<br>
                <label><input type="checkbox" name="allergy" value="蛋">蛋</label>
                <label><input type="checkbox" name="allergy" value="奶">奶</label>
                <label><input type="checkbox" name="allergy" value="小麥">小麥</label>
                <label><input type="checkbox" name="allergy" value="大豆">大豆</label>
            </p>
            <p>留言<textarea name="message"></textarea></p>
            <p class="submitBtn"><input type="submit" value="Send" class="ffJosefin"></p>
        </form>
    </div>
</section>